Responsive graphical design tools have risen in importance alongside the proliferation of different screen sizes used by the general public to render and consume graphical media. A responsive design is a design that is responsive to changes in dimension of the design. The response could include a change in a layout of the design, a change in style properties of the design, a change in interactions or behavior of the design, such as event handlers, and/or a change that adjusts a layout, a size, an anchoring rule, a relative position, an absolute position, or any other relevant parameter such that an instance of the design renders well on a variety of devices, orientations, and screen sizes. Responsive design tools and techniques are of particular importance for the design of web pages and web sites. As nearly every electronic device is now capable of accessing the Internet, and people are becoming less tolerant of small screen sizes serving as a hindrance to their web browsing experience, a web design process flow must take varying screen size into account from start to finish. Furthermore, media consumers expect to be able to manipulate the size of individual windows on a screen to allocate a desired amount of screen real estate to different windows based on their relative importance. As a result, the responsiveness of a graphical design must be taken into account even if the design is intended for consumption on a single device. Finally, certain devices are capable of rendering a design in different orientations such as portrait and landscape orientations. It is therefore desirable to have different versions of a design specified for each of these orientations.
Responsive web design generally involves two main steps. First a set of dimension specifications are provided by a designer. These dimensions specifications will serve either to define a target dimension at which a particular version of the design will be rendered, or as trigger points at which the design will switch from one version to another. For example, a designer may specify a version of a design for a smart phone screen with a 3.5 inch diagonal and another version of a design for a tablet screen with a 10 inch diagonal; or a designer may specify a design to switch from one version to another when a rendering space in a browser window is decreased in size below a width of 10 inches. FIG. 1 illustrates a responsive design as specified for a smart phone screen in portrait orientation 100 and in landscape orientation 101. The portrait orientation 100 and landscape orientation 101 each display different dimension versions of a single responsive design. Note that the hero image 102, title text 103, and link list 104 in portrait orientation 100 are laid out in an entirely different configuration as hero image 105, title text 106, and link list 107 in landscape orientation 101.
Regardless of how the different dimensions are selected or delineated, the increase in required design effort for the responsive design rises in proportion to the number of different sizes for which a design must be specified. For example, the work required to specify the responsive design shown in portrait orientation 100 and landscape orientation 101 may be nearly double the work required to specify a single nonresponsive design. Graphic designers and developers have found themselves faced with the difficult task of producing various versions of the same designs that are optimized for different rendering spaces. Responsive graphical design tools seek to ease the burden of specifying all of these different versions.
Related approaches to responsive graphical design have included automated procedures for modifying a design such as reducing white space between design elements, reducing font sizes, and reducing image sizes automatically as the rendering space afforded for the design is reduced. Other approaches have focused on alleviating the manual specification processes by copying the design automatically from one dimension version into an area used to specify a different dimension version of the design. For example, the design elements in portrait orientation 100 in FIG. 1 would be copied automatically by the tool into a landscape orientation design window automatically as soon as the designer requested the ability to define a landscape version of the design. The result would be something like what is shown in landscape orientation 108. The graphical designer would then be able to rearrange and resize the copied elements in the new design window to create the version shown in landscape orientation 101.